// 提交用户提交的评论
// 难点：如何通过父组件修改本组件的  loading 状态，以及提交完成之后应该做的事情；

<template>
  <form
    ref="form"
    id="comment"
    @submit.prevent="handleSubmit"
    class="from-content"
  >
    <h3>提交评论</h3>
    <div class="nickname">
      <input
        type="text"
        maxlength="10"
        v-model="formData.nickname"
        placeholder="请输入昵称"
      />
      <span class="maxlength">{{ formData.nickname.length }}/10</span>
    </div>
    <div class="error">{{ error.nickname }}</div>
    <div class="content">
      <textarea
        name=""
        maxlength="300"
        v-model="formData.content"
        placeholder="请输入评论内容"
      ></textarea>
      <span class="maxlength">{{ formData.content.length }}/300</span>
    </div>
    <div class="error">{{ error.content }}</div>
    <button :disabled="isLoading" type="submit">
      {{ !isLoading ? "提交" : "提交中..." }}
    </button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        nickname: "",
        content: "",
      },
      error: {
        nickname: "",
        content: "",
      },
      isLoading: false,
    };
  },
  methods: {
    handleSubmit() {
      // 如果没有加载完成，则不进行提交
      if (this.isLoading) {
        return;
      }

      // 进行表单验证，判断昵称和内容是否为空
      this.error.nickname =
        this.formData.nickname.length > 0 ? "" : "请输入昵称";
      this.error.content =
        this.formData.content.length > 0 ? "" : "请输入评论内容";

      // 如果，error 信息的长度大于0，表示表单验证不通过，不进行提交；
      if (this.error.nickname.length > 0 || this.error.content.length > 0) {
        return;
      }

      // 开启提交中
      this.isLoading = true;

      // 抛出一个 submit 事件
      // 同时，将设置本组件 loading 状态，以及提交完成后需要做的事；
      // 封装到一个函数中，并且作为事件参数一同抛出；

      this.$emit("submit", this.formData, (formMsg) => {
        this.formData.nickname = "";
        this.formData.content = "";
        this.isLoading = false;
        this.$showMessage({
          type: "success",
          wrap: this.$refs.form,
          content: formMsg,
          duration: 1000,
        });
      });
    },
  },
};
</script>

<style scoped lang="less">
@import url(~@/style/var.less);
form {
  input,
  textarea {
    font-size: 16px;

    width: 100%;
    padding: 10px;

    border: 2px dashed #ddd;
    border-radius: 10px;

    box-sizing: border-box;
    resize: none;
    &:focus {
      outline: none;
    }
  }
  textarea {
    height: 100px;
  }
  .nickname,
  .content {
    position: relative;
  }
  .nickname {
    width: 50%;
  }
  .content {
    width: 100%;
  }
  .maxlength {
    position: absolute;
    bottom: 7px;
    right: 6px;
    color: #ccc;
    font-size: 12px;
  }
  .error {
    color: red;
    margin: 10px 0;
    height: 1em;
  }
  button {
    padding: 5px 20px;
    border: 1px solid #fff;
    border-radius: 3px;
    background-color: @primary;
    color: #fff;
    &:focus {
      outline: none;
    }
    &:hover {
      background-color: darken(@primary, 10%);
    }
    &:disabled {
      background-color: lighten(@primary, 20%);
      cursor: not-allowed;
    }
  }
}
</style>